<template>
  <div type="card">
    <template slot="header">导出表格</template>
    <div class="ibps-mb">
      <el-button type="primary" @click="exportCsv"> 导出 CSV </el-button>
      <el-button type="primary" @click="exportExcel"> 导出 Excel </el-button>
      <el-button type="primary" @click="printtable"> 打印表格 </el-button>
    </div>
    <el-table v-bind="table" style="width: 100%" ref="table">
      <el-table-column
        v-for="(item, index) in table.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
  </div>
</template>

<script>
import Export from "../../pubilc/export/index";
import Print from "@/utils/print";
export default {
  data() {
    return {
      table: {
        columns: [
          {
            label: "ID",
            prop: "id",
          },
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "创建日期",
            prop: "creatDate",
          },
          {
            label: "地址",
            prop: "address",
          },
          {
            label: "邮编",
            prop: "zip",
          },
        ],
        data: [
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
          { id: "1", name: "2" },
        ],
        stripe: true,
        border: true,
      },
    };
  },
  methods: {
    printtable() {
      // let el = document.getElementById("srcImg");
      let el= this.$refs.table.$el;
      setTimeout(() => {
        Print(el, {
          title: "表格打印中",
          callback: () => {
          },
        });
      }, 300);
    },
    exportCsv(params = {}) {
      Export.csv({
        columns: this.table.columns,
        data: this.table.data,
      }).then(() => {
        this.$message("导出CSV成功");
      });
    },
    exportExcel() {
      Export.excel({
        columns: this.table.columns,
        data: this.table.data,
        // header: '导出 Excel',
        // merges: ['A1', 'E1']
      }).then(() => {
        this.$message("导出表格成功");
      });
    },
  },
};
</script>
